<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>导入Excel</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>

    <link href="${assets}/bootstrapFileInput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body style="width: 96%">
<form id="myForm" class="form-horizontal" action="${URL_ADM_COMMUNITY_IMPORT}" method="post" enctype="multipart/form-data" >
    <div class="form-group">
        <div class="col-sm-12">
            <input id="import_file_input" name="excelFile" type="file" accept="application/vnd.ms-excel" >
        </div>
    </div>
    <div class="modal-footer" style="text-align: center ">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
        <button type="submit" class="btn btn-primary">导入</button>
    </div>
</form>

<!-- jQuery -->
<script src="${js}/jquery-1.9.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>

<script src="${js}/bootbox.js"></script>
<!-- bootstrapValidator验证 -->
<script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
<!-- bootstrapValidator验证 国际化中文 -->
<script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>

<script src="${assets}/bootstrapFileInput/js/fileinput.js" type="text/javascript"></script>
<script src="${assets}/bootstrapFileInput/js/fileinput_locale_zh.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        /**
         * 初始化导入Excel输入框
         * */
        $("#import_file_input").fileinput({
//              //自定义按钮样式
//              browseLabel: "Pick Image",
//              browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
            'showPreview': false,//显示文件预览框
            'showUpload': false,//显示上传按钮
            'allowedFileExtensions' : ['xls'],//上传文件选择后，文件类型验证
            'previewFileType': 'any'
        });

        $('#myForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                excelFile: {
                    validators: {
                        notEmpty: true
                    }
                }
            }
        });

        //关闭弹出框
        $("#closeModalButt").on("click",function(){
            window.parent.simpleCloseModal("add");
        });

    });

</script>
</body>
</html>